<template>
    <view class="box" id="backTop">
        <view class="tabs" :class="{fixed_active:tabsTop}">
            <view class="tabs_item" v-for="(item,index) in tabs" :key="index" v-if="index<4" @click="changeTab(item.category_id)">
                <view :class="{active_img:true,none_img:item.category_id !== tabId}">
                    <view :class="{item_title:true,item_active:item.category_id == tabId}">{{item.category_name}}</view>
                </view>
                <view class="item_label">{{item.short_name}}</view>
            </view>
        </view>
        <view class="goods" v-if="goodsList">
            <!-- 为你推荐 -->
            <view class="goods_recommend" v-if="tabId == 0 ">
                <block v-for="(item,index) in goodsList" :key="index">
                    <!-- 直播 -->
                    <view class="recommend_live" :style="{backgroundImage:'url(' + item.thumb + ')'}"  v-if="item.type == 1" @click="toLive(item)">
                        <view class="live_watch">
                            <view class="watch_num">{{item.views}}人观看</view>
                        </view>
                        <view class="live_msg">
                            <view class="msg_box">
                                <view class="msg_logo">
                                    <image :src="item.headimg" mode="aspectFill"></image>
                                </view>
                                <view class="msg_name">{{item.nickname}}</view>
                            </view>
                        </view>
                    </view>

                    <!-- 短视频 -->
                    <view class="recommend_video" v-if="item.type == 2" :style="{backgroundImage:'url(' + item.image + ')'}" @click="toVideo(item.content_id)">
                        <view class="video_play">
                            <image :src="$util.imgPath('playicon.png')" ></image>
                        </view>
                        <view class="video_bottom">
                            <view class="bottom_title">{{item.title}}</view>
                            <view class="bottom_msg">
                                <view class="msg_logo">
                                    <image :src="item.headimg"></image>
                                </view>
                                <view class="msg_name">{{item.username}}</view>
                            </view>
                        </view>
                    </view>
                    <!-- 商品 -->
                    <view class="recommend_goods" v-if="item.type == 3" @click="toGoodsDetail(item.sku_id)">
                        <view class="goods_img">
                            <image :src="li" v-for="(li,i) in item.goods_image" :key="i" v-if="i == 0"></image>
                        </view>
                        <view class="goods_title">{{item.goods_name}}</view>
                        <view class="goods_label" v-if="item.discount_method == 'discount' ">折扣</view>
                        <view class="goods_label" v-if="item.discount_method == 'fixed_price' ">优惠</view>
                        <view class="goods_label" v-if="item.discount_method == 'manjian' ">满减</view>
						<view class="label_null" v-if="item.discount_method == '' "></view>
                        <view class="goods_price">
                            <view class="price_col">
                                <view class="price_discount">￥{{item.price}}</view>
                            </view>
                            <view class="add_car" @click.stop="addCartFast(item)">
                                <!-- <image  :src="$util.imgPath('add.png')"></image> -->
								<image src="../../../static/images/add.png"></image>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <!-- 商品列表 -->
            <view class="goods_list" v-for="(item,index) in goodsList" :key="index" v-if="tabId !== 0" @click="toGoodsDetail(item.sku_id)">
                <view class="list_item">
                    <view class="item_img">
                        <image :src="item.sku_image"></image>
                    </view>
                    <view class="item_title">{{item.goods_name}}</view>
                    <view class="item_label" v-if="item.discount_method == 'discount' ">折扣</view>
                    <view class="item_label" v-if="item.discount_method == 'fixed_price' ">优惠</view>
                    <view class="item_label" v-if="item.discount_method == 'manjian' ">满减</view>
					<view class="label_null" v-if="item.discount_method == '' "></view>
                    <view class="item_price">
                        <view class="price_col">
                            <view class="price_discount">￥{{item.price}}</view>
                        </view>
                        <view class="add_car" @click.stop="addCartFast(item)">
                            <image  :src="$util.imgPath('add.png')"></image>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		<ns-login ref="login"></ns-login>
    </view>
</template>

<script>
import {
	mapGetters
} from 'vuex'
export default {
	data() {
		return {
			tabs: [{
				category_id: 0,
				category_name: '为你推荐',
				short_name: '好货专区'
			}],
			tabId: 0,
			goodsList: [],
			page: 1,
			tabsTop: false
		}
	},
	computed: {
		...mapGetters(['token'])

	},
	onLoad() {
		const query = wx.createSelectorQuery()
		query.select('#backTop').boundingClientRect()
		query.exec((res)=>{
			console.log('置顶导航栏',res)
		})
	},
	mounted() {
		this.getTabs()
	},
	methods: {
		//导航栏置顶
		hitTop(){
			this.tabsTop = true
		},
		cancelTop(){
			this.tabsTop = false
		},
		// 短视频跳转
		toVideo(id) {
			this.$util.redirectTo('/livePages/video/video', {
				video_id: id
			})
		},
		// 商品详情跳转
		toGoodsDetail(id) {
			this.$util.redirectTo('/pages/goods/detail/detail', {
				sku_id: id
			})
			console.log(id)
		},
		// 接收触底事件
		hitBottom() {
			console.log('底部底部')
			this.page += 1
			this.getInfo()
		},
		// 切换顶部选项栏
		changeTab(category_id) {
			this.tabId = category_id
			this.page = 1
			this.getInfo()
			console.log(this.tabId)
		},
		// 获取顶部选项栏
		getTabs() {
			this.$request
				.getGoodscategory({
					level: 1
				}).then(res => {
					console.log('getTabs', res)
					this.tabs = this.tabs.concat(res.data)
					this.getInfo()
				})
		},
		// 获取列表
		getInfo() {
			if (this.tabId !== 0) {
				this.$request
					.getGoodsSkuList({
						page: this.page,
						page_size: 10,
						category_id: this.tabId,
						sort: 'desc'
					}).then(res => {
						if (this.page == 1) {
							this.goodsList = res.data.list
						} else {
							this.goodsList = this.goodsList.concat(res.data.list)
						}
						console.log('getInfo', res)
					})
			} else {
				this.$request
					.getGoodsrecommend({
						page: this.page,
						page_size: 10
					}).then(res => {
						var data = res.data.list
						console.log(data, 'dadadadadad')
						for (var i = 0; i < data.length; i++) {
							// data[i].goods_image.split(',')
							data[i].goods_image = data[i].hasOwnProperty('goods_image') ? data[i].goods_image.split(',') : ''
						}
						if (this.page == 1) {
							this.goodsList = data
						} else {
							this.goodsList = this.goodsList.concat(data)
						}
						console.log('getInfo', res)
					})
			}
		},
		/**
             * getCoupon
             * 获取每个商品的优惠券信息
             */
		getCoupon() {
			this.goodsList = this.goodsList.map(item => {
				this.$api.sendRequest({
					url: '/coupon/api/coupon/typelists',
					data: {
						site_id: item.site_id,
						goods_id: item.goods_id
					},
					success: res => {
						item.coupon = res.data
						console.log('getCoupon', this.goodsList)
					}
				})
			})
		},
		/**
             * addCartFast
             * 加入购物车
             */
		addCartFast(item) {
			console.log(item)
			if (uni.getStorageSync('token')) {

				this.$request
					.addCartFast({
						app_type: 'app',
						site_id: item.site_id,
						sku_id: item.sku_id,
						num: 1
					}).then(res => {
						console.log(res)
						if (res.code == 0) {
							this.$util.tip('加入购物车成功')
							return
						}
						this.$util.tip(res.message)
					})
			} else {
				this.$refs.login.open()
			}

		},
		/**
		 * toLive
		 * 跳转直播间
		 */
		toLive(val) {
			console.log(val)
			if (val.replay_url == null) {
				// #ifdef H5
				let sUserAgent = navigator.userAgent.toLowerCase()
				var isHuawei = sUserAgent.match(/huawei/i) == 'huawei'
				var isHonor = sUserAgent.match(/honor/i) == 'honor'
				if (isHuawei || isHonor) {
					let url = 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/index.html#/xmg/live?live_id=' + val.id
					location.href = url
				} else {

					if (this.env.includes('NativeApp')) {
						this.$sdk.startAudience(val.id)
						return
					}
					this.$util.redirectTo('/livePages/live/live', {
						live_id: val.id
					})
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.$util.redirectTo('/livePages/live/live', {
					live_id: val.id
				})

				// #endif
			} else {

				// #ifdef H5
				if (this.env.includes('NativeApp')) {
					this.$sdk.startAudience(val.id)
					return
				}
				// #endif

				// query:
				this.$util.redirectTo('/livePages/live/replay', {
					live_id: val.id
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.box {
    width: 702rpx;
    margin: 28rpx 24rpx 0;

    .tabs {
        display: flex;
        align-items: center;
        justify-content: space-between;

        &_item {
            text-align: center;

            .active_img {
                background-image: url("https://xmgts.kanfoshan.cn/public/static/images/capsule.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .item_title {
                    width: 166rpx;
                    height: 64rpx;
                    line-height: 72rpx;
                    color: #222222;
                    font-size: 32rpx;
                    font-weight: bold;
                }

                .item_active {
                    font-size: 28rpx;
                    background: linear-gradient(
                        84deg,
                        #7323b2 0%,
                        #fa6542 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }

            .none_img {
                background-image: none;
            }

            .item_label {
                color: #999999;
                font-size: 24rpx;
                font-weight: 400;
            }
        }
    }

    .goods {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30rpx;
        flex-wrap: wrap;

        .goods_recommend {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            // 直播
            .recommend_live {
                width: 340rpx;
                height: 500rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                overflow: hidden;
                margin-top: 20rpx;
                position: relative;
                // background-image: url(../../../static/images/livebg.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .live_watch {
                    width: 194rpx;
                    height: 48rpx;
                    position: absolute;
                    top: 20rpx;
                    left: 20rpx;
                    background-image: url('https://xmgts.kanfoshan.cn/public/static/images/watch.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;

                    .watch_num {
                        margin-left: 54rpx;
                        color: #ffffff;
                        font-size: 24rpx;
                        font-weight: 500;
                        line-height: 48rpx;
                    }
                }

                .live_msg {
                    display: flex;
                    align-items: center;
                    width: 340rpx;
                    height: 186rpx;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background: linear-gradient(
                        180deg,
                        rgba(0, 0, 0, 0) 0%,
                        #000000 100%
                    );

                    .msg_box {
                        position: absolute;
                        bottom: 26rpx;
                        left: 26rpx;
                        display: flex;
                        align-items: center;

                        .msg_logo {
                            width: 48rpx;
                            height: 48rpx;
                            overflow: hidden;
                            border-radius: 50%;

                            image {
                                width: 48rpx;
                                height: 48rpx;
                            }
                        }

                        .msg_name {
                            color: #ffffff;
                            font-size: 24rpx;
                            font-weight: 500;
                            margin-left: 16rpx;
                        }
                    }
                }
            }

            // 短视频
            .recommend_video {
                width: 340rpx;
                height: 500rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                overflow: hidden;
                margin-top: 20rpx;
                position: relative;
                // background-image: url(../../../static/images/livebg.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .video_play {
                    position: absolute;
                    top: 20rpx;
                    right: 24rpx;

                    image {
                        width: 48rpx;
                        height: 48rpx;
                    }
                }

                .video_bottom {
                    width: 340rpx;
                    height: 186rpx;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background: linear-gradient(
                        180deg,
                        rgba(0, 0, 0, 0),
                        #000000
                    );

                    .bottom_title {
                        color: #ffffff;
                        font-size: 28rpx;
                        font-weight: 500;
                        width: 100%;
                        padding: 0 22rpx;
                    }

                    .bottom_msg {
                        display: flex;
                        align-items: center;
                        position: absolute;
                        bottom: 26rpx;
                        left: 26rpx;

                        .msg_logo {
                            width: 48rpx;
                            height: 48rpx;
                            border-radius: 50%;
                            overflow: hidden;

                            image {
                                width: 48rpx;
                                height: 48rpx;
                            }
                        }

                        .msg_name {
                            color: #ffffff;
                            font-size: 24rpx;
                            font-weight: 500;
                            margin-left: 16rpx;
                        }
                    }
                }
            }

            // 商品
            .recommend_goods {
                width: 340rpx;
                height: 500rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                overflow: hidden;
                margin-top: 20rpx;

                .goods_img {
                    width: 260rpx;
                    height: 260rpx;
                    margin: 20rpx 40rpx;

                    image {
                        width: 260rpx;
                        height: 260rpx;
                    }
                }

                .goods_title {
                    height: 82rpx;
                    line-height: 40rpx;
                    padding: 0 16rpx;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .goods_label {
                    display: inline-block;
                    padding: 0 10rpx;
                    height: 36rpx;
                    border: 2rpx solid #ffbd00;
                    // background: rgba(239, 177, 0, 0.3);
                    border-radius: 4rpx;
                    margin-left: 16rpx;
                    text-align: center;
                    line-height: 30rpx;
                    color: #efb100;
                    font-size: 20rpx;
                    font-weight: 400;
                }

                .label_null {
					width: 1rpx;
                    height: 46rpx;
                }

                .goods_price {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    overflow: hidden;

                    .price_col {
                        display: flex;
                        align-items: center;

                        .price_discount {
                            width: 120rpx;
                            color: #222222;
                            font-size: 36rpx;
                            font-weight: bold;
                            margin-left: 18rpx;
                        }

                        .price_original {
                            width: 100rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            color: #cccccc;
                            font-size: 24rpx;
                            font-weight: 500;
                            text-decoration: line-through;
                            margin-left: 8rpx;
                        }
                    }

                    .add_car {
                        width: 44rpx;
                        height: 44rpx;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 20rpx;

                        image {
                            width: 44rpx;
                            height: 44rpx;
                        }
                    }
                }
            }
        }

        &_list {
            // 商品类型样式
            .list_item {
                width: 100%;
                padding-bottom: 20rpx;
                width: 340rpx;
                height: 500rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                overflow: hidden;
                margin-top: 20rpx;

                .item_img {
                    width: 260rpx;
                    height: 260rpx;
                    margin: 20rpx 40rpx 0;

                    image {
                        width: 260rpx;
                        height: 260rpx;
                    }
                }

                .item_title {
					height: 82rpx;
					line-height: 40rpx;
					padding: 0 16rpx;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
                }

                .item_label {
                    display: inline-block;
                    padding: 0 10rpx;
                    height: 36rpx;
                    border: 2rpx solid rgba(255, 52, 53, 0.5);
                    background: rgba(255, 236, 236, 0.5);
                    border-radius: 4rpx;
                    margin-left: 16rpx;
                    text-align: center;
                    line-height: 36rpx;
                    color: #ff3435;
                    font-size: 20rpx;
                    font-weight: 400;
                }

				.label_null {
					width: 1rpx;
				    height: 46rpx;
				}

                .item_price {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .price_col {
                        display: flex;
                        align-items: center;

                        .price_discount {
                            color: #222222;
                            font-size: 36rpx;
                            font-weight: bold;
                            margin-left: 18rpx;
                        }

                        .price_original {
                            color: #cccccc;
                            font-size: 24rpx;
                            font-weight: 500;
                            text-decoration: line-through;
                            margin-left: 8rpx;
                        }
                    }

                    .add_car {
                        width: 48rpx;
                        height: 48rpx;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 20rpx;

                        image {
                            width: 48rpx;
                            height: 48rpx;
                        }
                    }
                }
            }
        }
    }
}
.fixed_active{
	position: fixed;
	top: 106rpx;
	background-color: #F8F8F8;
	z-index: 99;
	width: 100%;
}
</style>
